<!DOCTYPE html>
<html>
    <head>
        <title>拉新排行榜</title>
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
        <script src="/unpkg/unpkg.vue.js"></script>
        <script src="/unpkg/lib-master/index.js"></script>
        <script src="/unpkg/unpkg.axios.min.js"></script>
        <script src="/unpkg/unpkg.clipboard.min.js"></script>
    </head>
    <body>
        <div id="app">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>活动列表</span>
                    <div class="rightBtn" style="float: right;">
                        <el-button type="primary" size="mini" @click="window.location.href='add.html'">创建活动</el-button>
                        <el-button class="copylink" size="mini" data-clipboard-action="copy" @click.once="copyLink" data-clipboard-text="{$toolbarUrl}">复制链接</el-button>
                    </div>
                </div>
                <el-table :data="list">
                    <el-table-column label="活动名称" prop="title" width="200"></el-table-column>
                    <el-table-column label="排行指标" prop="top_type" width="200">
                        <template slot-scope="scope">!{!{scope.row.top_type==1?'邀请客户成为企微客户':'根据客户加入群聊'}}</template>
                    </el-table-column>
                    <el-table-column label="参与员工" prop="users" v-if>
                        <template slot-scope="scope">
                            <div v-if="scope.row.top_type==1">
                                <el-tag effect="plain" class="user" v-for="user in scope.row.users.slice(0,6)" :key="user.id">!{!{user.name}}</el-tag>
                                <span v-if="scope.row.users.length > 6">等!{!{scope.row.users.length}}人参与</span>
                            </div>
                            <div v-if="scope.row.top_type==2">
                                <el-tag effect="plain" class="user" v-for="chat in scope.row.chats.slice(0,3)" :key="chat.id">!{!{chat.name}}</el-tag>
                                <span v-if="scope.row.chats.length > 3">等!{!{scope.row.chats.length}}个群聊</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status"  width="100"></el-table-column>
                    <el-table-column label="活动时间" prop="start_time"  width="180">
                        <template slot-scope="scope">!{!{scope.row.start_time}}至!{!{scope.row.end_time}}</template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="create_time"  width="100"></el-table-column>
                    <el-table-column width="100px">
                        <template slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="goLink(scope.row.id)">详情</el-link>
                            <span class="line">|</span>
                            <el-link type="danger" @click="deleteThis(scope.row.id)" :underline="false">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="paged"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                </el-pagination>
            </el-card>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data() {
                    return {
                        list:[],
                        total:0,
                        paged:1,
                    }
                },
                mounted() {
                    this.getActiveList()
                },
                methods: {
                    copyLink(){
                        let clipboard = new ClipboardJS('.copylink')
                        clipboard.on('success', e => {
                            this.$message.success("复制成功！");
                        })
                        clipboard.on('error', e =>{
                            this.$message.error("该浏览器不支持复制！");
                        })  
                    },
                    goLink(id){
                        window.location.href = 'showDetail.html?id='+ id
                    },
                    getActiveList(){
                        let loading = this.$loading(!{text: '请稍等...'});
                        axios.get('/Addons/NewPerson/Admin/InviatePerson/getActiveList.html',!{params: !{paged: this.paged}}).then( resp => {
                            this.list = resp.data.data.items
                            this.total= resp.data.data.count
                            loading.close();
                        }).catch(function (error) {
                            loading.close();
                            this.$message.error('错误'|| error)
                        });
                    },
                    handleCurrentChange(paged){
                        this.paged = paged
                        this.getActiveList()
                    },
                    deleteThis(id) {
                        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                        }).then(() => {
                            axios.get('/Addons/NewPerson/Admin/InviatePerson/deltete.html',!{params: !{id: id}}).then( resp => {
                                if(resp.data.status!='success') return this.$message.error(resp.data.msg);
                                return this.getActiveList();
                            }).catch(function (error) {
                                this.$message.error('错误'|| error)
                            });
                        });
                    }
                }
            })
        </script>
        <style>
            .el-pagination{
                margin-top:20px;
            }
            .user{
                margin-right: 10px;
            }
            .line{
                padding:0 5px;
                color:#999999;
            }
        </style>
    </body>
</html>
